<template>
  <!-- <u-popup
    :show="visible"
    mode="bottom"
    @touchmove.stop.prevent
    @close="showSelect = false"
    round="12rpx"
  > -->
  <view class="pop page100" v-if="visible">
    <view class="choose-area flex-col">
      <view class="top flexAIC">
        <view class="flex1 center">请选择区域</view>
        <view @click="close()" class="close"><u-icon name="close" /></view>
      </view>
      <view class="list">
        <view
          :class="[activeId == item.id ? 'active' : '','class','flexAIC']"
          v-for="(item, index) in areaList"
          :key="index"
          @click="setArea(item)"
        >
          <view 
            >{{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
   
  <!-- </u-popup> -->
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    activeId:{
      type:Number,
      default:''
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    ...mapState("sp-commodity/index", ["areaList"]),
  },
  methods: {
    setArea(item) {
      this.$emit("setArea", item);
    },
    close() {
      // showSelect = false
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.pop{
    z-index: 10077;
    position: fixed;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    align-items: flex-end;
}
.choose-area {
  background-color: #fff;
  border-radius: 12rpx 12rpx 0 0;
  height: fit-content;
  width: 100%;
  .top {
    position: relative;
    padding: 40rpx 0rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #131313;
    border-bottom: 1px solid #f5f5f5;
    width: calc(100% - 60rpx);
    margin: 0 auto;
    .close {
      position: absolute;
      right: 0rpx;
      top: 45rpx;
    }
  }
  .list {
    padding: 20rpx 13rpx 170rpx;
    flex-wrap: wrap;
    display: flex;
    overflow: scroll;
    max-height:calc(66vh - 124rpx);
    .class {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      height: 66rpx;
      background-color: #f7f7f7;
      border-radius: 33rpx;
      padding: 0 55rpx;
      margin: 20rpx;
    }
    .active{
      background-color:var(--theme) !important;
      color: #fff !important;
    }
  }
}
</style>